Vue Js Get Viewport of Window:In  Vue.js, the viewport height and width of the  browser window can be determined by accessing the window.innerHeight and window.innerWidth properties respectively. These properties return the height and width (in pixels) of the viewport, excluding any scrollbars. This information can be useful in a variety of scenarios, such as responsive design and adjusting the  layout of elements on a page based on the available screen size. To access these values in a Vue component, they can be stored in a data property and then used in the template

How can the height of the browser window’s viewport in pixels be obtained, excluding any scrollbars, in Vue.js?

• A  Vue.js component is created to  display the height of the viewport
• A data property viewportHeight is defined and initialized to 0
• When the component is mounted, window.innerHeight is assigned to viewportHeight
• The value of viewportHeight is displayed in the template using mustache syntax {{ viewportHeight }}
• The template renders the text “The height of the viewport is: viewportHeight px”
• The displayed value of viewportHeight is dynamic and updates when the user resizes the window or changes the device being used.

Vue Js Accessing the Viewport Height in  Vue.js with window.innerHeight

 <div id="app">
      <p>The height of the viewport is: {{ viewportHeight }} px</p>
 </div>
<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    viewportHeight: null
                 }
            },
            mounted() {
                this.viewportHeight = window.innerHeight
            }
       });
</script>

Output of above example

How to use inner.windowWidth computed property in Vue.js

1. A Vue.js component is created to  display the width of the viewport
2. A data property viewportWidth is defined and initialized to 0
3. When the component is mounted, window.innerWidth is assigned to viewportWidth
4. The value of viewportWidth is displayed in the template using mustache syntax {{ viewportWidth }}
5. The template renders the text “The height of the viewport is: viewportWidth px”
6. The displayed value of viewportWidth is dynamic and updates when the user resizes the window or changes the device being used.

 Vue Js Getting window.innerWidth

<div id="app">
    <p>The height of the viewport is: {{ viewportWidth }} px</p>
</div>
<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    viewportWidth: null

                }
            },
            mounted() {
                this.viewportWidth = window.innerWidth
            }

        });
</script>

Output of above example